<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="上移下移.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        table{
            width: 600px;
            border: 1px solid #ccc;
            text-align: center;
            margin: 100px auto;
        }
        table th,table td{
            border: 1px solid #ccc;
            height: 40px;
        }
    </style>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>wsq</td>
                <td>15</td>
                <td>男</td>
                <td>学习</td>
                <td>
                    <button type="button">上移</button>
                    <button type="button">删除</button>
                    <button type="button">下移</button>
                </td>
            </tr> -->
        </tbody>
    </table>


    <script>
          var tbody=document.querySelector("tbody");
          var obj=JSON.parse(localStorage.obj);

          //本地存储
         window.onload=function(){
             show(obj);
         }


           //渲染
           function show(obj){
               var str='';
               for(var i=0;i<obj.arr.length;i++){
                   str+=`
                         <tr>
                               <td>${i+1}</td>
                               <td>${obj.arr[i].userName}</td>
                               <td>${obj.arr[i].age}</td>
                               <td>${obj.arr[i].sex}</td>
                               <td>${obj.arr[i].hobby}</td>
                               <td>
                                      <button type="button" id="shang" onclick="up(this,${obj.arr[i].ida})">上移</button>
                                      <button type="button" id="del" onclick="del(${obj.arr[i].ida})">删除</button>
                                      <button type="button" id="xia" onclick="down(this,${obj.arr[i].ida})">下移</button>
                               </td>
                         </tr> 
                        `;
               }
               tbody.innerHTML=str;
                //按钮禁用
               var shang=document.querySelectorAll("#shang");
               var xia=document.querySelectorAll("#xia");

               for(var i=0;i<obj.arr.length;i++){
                   if(i==0){
                       shang[i].disabled=true;
                   }
                   if(i==obj.arr.length - 1){
                       xia[i].disabled=true;
                   }
               }
           }
 

           //删除
           function del(id){
              for(var i=0;i<obj.arr.length;i++){
                  if(id==obj.arr[i].ida){
                      obj.arr.splice(i,1);
                  }
                  localStorage.obj=JSON.stringify(obj);
                  show(obj);
              }
           }

            

           //上移
           function up(el,id){
             for(var i=0;i<obj.arr.length;i++){
                 if(id==obj.arr[i].ida){
                     obj.arr.splice(i-1,2,obj.arr[i],obj.arr[i-1]);
                 }
             }
             localStorage.obj=JSON.stringify(obj);
             show(obj);
           }


           //下移 

           function down(el,id){
               obj=JSON.parse(localStorage.obj);
               for(var j=0;j<obj.arr.length;j++){
                   if(id==obj.arr[j].ida && j<obj.arr.length-1){
                       obj.arr.splice(j,2,obj.arr[j+1],obj.arr[j]);
                   }
               }
               localStorage.obj=JSON.stringify(obj);
               show(obj);
           }
    </script>
</body>
</html>